<template>
  <div class="home">
     <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <img class="navbar-brand" src="../img/logo2.jpg" id="a1">
  <ul class="navbar-nav">

    <li class="nav-item">
      <a class="nav-link" href="#">欢迎{{$store.state.Login.name}}登录</a>
    </li>
  </ul>
</nav>
    <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-default" @click="ssgy">膳食干预</button>
    <button type="button" class="btn btn-default" @click="ydgy">运动干预</button>
    <button type="button" class="btn btn-default" @click="gyjh">干预计划</button>
</div>
   <div id="demo" class="carousel slide" data-ride="carousel">
 
 
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="../img/a.jpg" style="height:500px">
    </div>
    <div class="carousel-item">
      <img src="../img/b.jpg" style="height:500px">
    </div>
    <div class="carousel-item">
      <img src="../img/c.jpg" style="height:500px">
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
   </div>
   <div v-show="b" class="table-box">
    <el-table
      :data="tableInfo"
      style="width: 200%"
      :header-cell-style="{textAlign: 'center'}"
      :cell-style="{ textAlign: 'center' }">
      <el-table-column
        prop="sportName"
        label="运动名称"

        >
      </el-table-column>
      <el-table-column
        prop="sportTime"
        label="运动时长"

       >
      </el-table-column>
      <el-table-column
        prop="sportCycle"
        label="运动周期"
 >
      </el-table-column>
      <el-table-column
        prop="consumeCount"
        label="消耗量"
>
      </el-table-column>
    </el-table>
   </div>
   <div v-show="a">
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{textAlign: 'center'}"
      :cell-style="{ textAlign: 'center' }"
      >
      <el-table-column
        prop="eatTimes"
        label="餐次"
        >
      </el-table-column>
      <el-table-column
        prop="recommendFood"
        label="推荐食物"
       >
      </el-table-column>
      <el-table-column
        prop="foodQuantity"
        label="分量"
        >
      </el-table-column>
      <el-table-column
        prop="adi"
        label="摄入量"
  >
      </el-table-column>
    </el-table>
   </div>
   <div v-show="c">
    <el-table
      :data="tableable"
      style="width: 100%"
      :header-cell-style="{textAlign: 'center'}"
      :cell-style="{ textAlign: 'center' }"
      >
      <el-table-column
        prop="interposeTime"
        label="干预时间"
        >
      </el-table-column>
      <el-table-column
        prop="interposeShape"
        label="干预形式"
        >
      </el-table-column>
      <el-table-column
        prop="content"
        label="主要形式" >
      </el-table-column>
    </el-table>
   </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
data() {
  return {
    tableData:[],
    tableInfo:[],
    tableable:[],
    a:true,
    b:'',
    c:''
  }
},
created(){
    axios.post("http://localhost:8085/ssgy",{tMemberId:this.$store.state.Login.id}).then((response) => {
          this.tableData=response.data
         })
    axios.post("http://localhost:8085/yydd",{tMemberId:this.$store.state.Login.id}).then((response) => {
          this.tableInfo=response.data
          console.log(this.tableInfo)
         })     
    axios.post("http://localhost:8085/gyjh",{tMemberId:this.$store.state.Login.id}).then((response) => {
          this.tableable=response.data
          console.log(this.tableable)
         })     
},
methods:{
  ssgy(){
  this.a=true
  this.b=false
  this.c=false
  },
  ydgy(){
  this.a=false
  this.b=true
  this.c=false
  },
  gyjh(){
  this.a=false
  this.b=false
  this.c=true
  }
}
}
</script>

<style>
#a1{
  width: 35px;
  height: 40px;
}
.table-box{
    text-align: center;
}  
</style>